<template>
  <div id="drawltem">
    <vHeadSpace />
    <div class="outcontainer">
      <vAsideSpace />
      <div  class="content" id="charts">
        <div>
          <el-button type="primary" icon="el-icon-arrow-left" @click="goback()" style="margin-right: 15px">返回上一页</el-button>
          <span style="font-size: 200%">历史数据</span>

        </div>
        <div id="itemchart" style="width: 100%;height:450px;"></div>
      </div>
    </div>
    <vFootSpace />

  </div>

</template>

<script>

export default {
  name: "DrawItemCharts",

  data() {
    return {
      transfer_data: {},
    }
  },

  mounted() {
    this.transfer_data = this.$route.query;
    console.log("刚获取");
    console.log(this.$route.query);
    this.drawChart();
  },

  methods: {

    /*
     *  返回上级页面
     * */
    goback() {
      this.$router.go(-1);
    },


    /**
     * 画折线图
     */
    drawChart() {

      const _this = this;
      var val = _this.transfer_data;
      axios({
        methods: 'get',
        url: '/basical/getDataByItemID.action',
        params: {
          itemID: val.itemid, // itemid
          hostID: val.hostId, // hostId
        }
      }).then((res) => {
        var result = res.data.content.result;
        console.log(result.length)
        if (result.length==0){
          _this.goback();
        }else {
          //画图
          var timedata = new Array();//时间
          var itmevalues = new Array();//利用率
          for (var i = 0; i < result.length; i++) {
            timedata[i] = result[i].clock;
            itmevalues[i] = result[i].value;
          }
          this.charts = echarts.init(document.getElementById('itemchart'))
          this.charts.setOption({
            title: {
              text: val.name,
            },
            tooltip: {
              trigger: 'axis',
              axiosPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#283b56'
                }
              }
            },
            legend: {
              data: [val.name],
              left: '70%',
            },
            grid: {
              left: '4%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            dataZoom: {
              show: false,
              start: 0,
              end: 100
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: true,
                data: timedata,
              }
            ],
            yAxis: [
              {
                type: 'value',
                scale: true,
                // name: '利用率',
                max: Math.ceil(Math.max.apply(null, itmevalues)),
                min: 0,
                boundaryGap: [0.2, 0.2],
                splitNumber: 5,//分割的段数
                interval: Math.ceil(Math.max.apply(null, itmevalues)) / 5//分割的间隔
              }
            ],
            series:
                {
                  name: 'CPU利用率',
                  type: 'line',
                  // stack: '总量',
                  data: itmevalues,
                  color: "#6699CC"
                }
          })
        }

      })
    }
  },


}
</script>

<style scoped>
  #drawltem {
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
  .outcontainer{
    display: flex;
  }
  .content{
    margin-top: 80px;
    width: 100%;
    height: 550px;
    overflow-x:hidden
  }
</style>